<m-center *ngIf="result$ | async as result">
  <m-card [autoHeight]="true">
    <div card-head>
      <m-key-search name="软件列表" [useRouteQueryParam]="true">
        <button class="btn btn-primary" (click)="goToAdminUrl()">应用商店</button>
      </m-key-search>
    </div>
    <m-data-table
      [data]="result.list"
      [result]="result"
      [sortable]="Sortable"
      [sortUseRouteQueryParam]="true"
    >
      <ng-container mDataTableColumn="name" header="软件别名">
        <ng-template let-icon="icon" let-id="id" let-name="name" let-area_id="area_id">
          <td>
            <a [mDetailRouterLink]="{ id: id, name: name, type: 'software', area_id: area_id }">
              <img class="icon icon-sm " [src]="icon" />{{ name }}
            </a>
          </td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="软件架构">
        <ng-template let-architecture="architecture">
          <td>{{ architecture }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="区域数">
        <ng-template let-area="area_count">
          <td>{{ area }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="upgrade_at" header="更新时间">
        <ng-template let-upgrade_at="upgrade_at">
          <td>{{ upgrade_at | date }}</td>
        </ng-template>
      </ng-container>
      <m-pagination [length]="result.total" [pageSize]="result.pageSize">
      </m-pagination>
    </m-data-table>
  </m-card>
  <m-history [type]="'software'" [length]="8"></m-history>
</m-center>
